<template>
  <view class="page-index">
    <Loader ref="LoaderRef" />
    <Toast ref="ToastRef" />
    <view class="mealPage">
      <view class="container">
        <template v-if="isLoad">
          <index ref="INDEX" v-show="select === 'INDEX'" @tab="onTab"></index>
          <home ref="HOME" v-show="select === 'HOME'" @tab="onTab"></home>
          <order ref="ORDER" v-show="select === 'ORDER'" @tab="onTab"></order>
          <my ref="MY" v-show="select === 'MY'" @tab="onTab"></my>
        </template>
      </view>
      <view class="tabMenu">
        <view class="menu">
          <view
            v-for="(item, index) in tabs"
            :key="index"
            :class="['list', select == item.id ? ' select' : '']"
            @click="onTab(item.id)"
          >
            <view
              class="icon"
              :style="
                (select == item.id ? 'filter: hue-rotate(100deg);' : '') +
                'background-image: var(' +
                (select == item.id ? item.icon_active : item.icon) +
                ');'
              "
            ></view>
            <view class="text" :style="select == item.id ? 'color:#212430;' : ''">
              {{ item.name }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <Footer></Footer>
  </view>
</template>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import index from "./iframes/index";
import home from "./iframes/home";
import order from "./iframes/order";
import my from "./iframes/my";
import utils from "@/utils/utils";
import store from "@/store/index";

const vm = getCurrentInstance().proxy;
const LoaderRef = ref();
const ToastRef = ref();
const select = ref("");
const loadParam = ref({});
const isLoad = ref(false);
const tabs = reactive([
  {
    id: "INDEX",
    name: "首页",
    icon: "--Img_Footer_Friend",
    icon_active: "--Img_Footer_FriendActive",
  },
  {
    id: "ORDER",
    name: "订单",
    icon: "--Img_Footer_Near",
    icon_active: "--Img_Footer_NearActive",
  },
  {
    id: "MY",
    name: "我的",
    icon: "--Img_Footer_My",
    icon_active: "--Img_Footer_MyActive",
  },
]);

const emitIframe = (id, fnName, params = {}) => {
  let choose = vm.$refs[id];
  if (choose) {
    choose[fnName] && choose[fnName](params);
  }
};

onLoad((opts) => {
  console.log(opts);
  // 二维码扫进来
  if (opts.q) {
    let q = decodeURIComponent(opts.q);
    console.log(utils.urlParam(q));
    store.loginOut();
    store.saveQrInfo(utils.urlParam(q));
    store.state.orderType = 11;
  }
  // 子框架
  let id = opts.select;
  loadParam.value = opts;
  if (id) {
    select.value = id;
  }
});
onShow(() => {
  if (isLoad.value) {
    onPageShow();
  }
});
onMounted(() => {
  initLogin();
});

const onPageShow = () => {
  emitIframe(select.value, "__onPageShow");
};
const onPageLoad = () => {
  emitIframe(select.value, "__onPageLoad", loadParam.value);
};
const onPageMounted = () => {
  for (let i in tabs) {
    emitIframe(tabs[i].id, "__onPageMounted");
  }
};
const onTab = (id) => {
  const oldId = select.value;
  select.value = id;
  if (oldId !== id) {
    emitIframe(oldId, "__onPageLeave");
    emitIframe(select.value, "__onPageEnter");
  }
};

const init = async () => {
  isLoad.value = true;
  setTimeout(() => {
    let val = select.value;
    if (select.value === "") {
      if (store.isOrderType.value) {
        val = "HOME";
      } else {
        val = "INDEX";
      }
    }
    onTab(val);
    onPageLoad();
    onPageShow();
    onPageMounted();
  }, 300);
};

const initLogin = async () => {
  if (store.isLogin.value) {
    init();
  } else {
    LoaderRef.value.show("加载中...");
    try {
      await store.login(store.state.qr);
      store.isMember.value && await store.updateWalletAmount();
      LoaderRef.value.hide();
      init();
    } catch (err) {
      LoaderRef.value.hide(() => {
        ToastRef.value.show({ title: "抱歉", content: err });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.page-index {
  position: relative;
  height: 100%;
  width: 100%;
  .mealPage {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    & > .container {
      position: relative;
      flex: 1;
      height: 0;
      width: 100%;
    }
    & > .tabMenu {
      z-index: 1;
      position: relative;
      width: 100%;
      border-top: solid 4rpx #f3f3f3;
      box-sizing: border-box;
      .menu {
        font-size: 24rpx;
        display: flex;
        width: 100%;
        padding: 20rpx 0;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #929292;
        .icon {
          width: 45rpx;
          height: 45rpx;
          display: block;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center center;
          margin-bottom: 7rpx;
        }
        .list {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>
